<template>
  <div class="login-container">
    <h2>后台管理系统登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
    <p v-if="error" style="color:red">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 用户名和密码的响应式变量
const username = ref('')
const password = ref('')
const error = ref('')
const router = useRouter()

// 登录处理函数
function handleLogin() {
  // 简单模拟登录，用户名：admin，密码：123456
  if (username.value === 'admin' && password.value === '123456') {
    localStorage.setItem('token', 'mock-token') // 登录成功后存储 token
    router.push('/') // 跳转到主页面
  } else {
    error.value = '用户名或密码错误！'
  }
}
</script>

<style scoped>
.login-container {
  max-width: 340px;
  margin: 120px auto;
  padding: 32px 28px 24px 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08);
  border: 1px solid #e4e7ed;
}
.login-container h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #409eff;
  letter-spacing: 2px;
}
input { display: block; width: 100%; margin-bottom: 12px; padding: 8px; }
button { width: 100%; padding: 8px; }
</style> 